Formatters

Muze provides a comprehensive formatting API that allows you to customize how data values are displayed in your visualizations. Formatters are responsible for converting raw data values into human-readable formatted strings.

Overview

The formatters API provides three main formatter types:

• NumberFormatter: Format numeric values with support for decimal, currency, and percentage styles
• DateFormatter: Format date and time values with support for absolute and indexed date formatting
• SplitByFormatter: Apply different formatters to different values based on a split-by field

Accessing Formatters

To access formatters in your code:

const { formatters } = viz;
const { NumberFormatter, DateFormatter, SplitByFormatter } = formatters;

Basic Usage

Number Formatting

// Create a decimal formatter
const decimalFormatter = new NumberFormatter('decimal', {
  decimalDigits: 2,
  thousandSeparator: 'comma'
});

const formatted = decimalFormatter.format(1234.567);
// Output: "1,234.57"

Date Formatting

// Create a date formatter with custom format
const dateFormatter = new DateFormatter({
  format: 'MMM dd, yyyy'
});

const formatted = dateFormatter.format(new Date('2024-01-15'));
// Output: "Jan 15, 2024"

Split-By Formatting

// Create different formatters for different product categories
const splitByFormatter = new SplitByFormatter({
  splitByField: 'Category',
  values: {
    'Electronics': new NumberFormatter('currency', { currency: 'USD' }),
    'Food': new NumberFormatter('decimal', { decimalDigits: 2 })
  }
});

Formatter Methods

All formatters implement the Formatter interface with the following methods:

format()

Formats a single data value and returns the formatted string.

format(value: MuzeDatum): string

Parameters:

Property	Type	Required	Description
value	MuzeDatum	true	The raw data value to format

Returns: String - The formatted value

formatterFunc()

Returns a formatter function that can be used with Muze visualizations. This function receives data.

formatterFunc(): (dataInfo: MuzeType) => string

Returns: Function - A function that takes data info and returns formatted string

Basic Usage

const formatter = new NumberFormatter('currency', {
  currency: 'USD',
  decimalDigits: 0
});

canvas
  .rows(['Sales'])
  .columns(['Date'])
  .config({
    axes: {
      y: {
        formatter: formatter.formatterFunc()
      }
    }
  })
  .mount('#chart');